<div class="circle">
  <svg width="200" height="200" style="transform: rotate(-90deg)">
    <circle id="progress"
      cx="100"
      cy="80"
      r="50"
      fill="none"
      stroke-width="6"
      stroke="#ff6600"
      stroke-dasharray="314"
      stroke-dashoffset="314"
    />
    <circle id="progress"
      cx="100"
      cy="80"
      r="60"
      fill="none"
      stroke-width="6"
      stroke="#ff6600"
      stroke-dasharray="377"
      stroke-dashoffset="377"
    />
    <circle id="progress"
      cx="100"
      cy="80"
      r="70"
      fill="none"
      stroke-width="6"
      stroke="#ff6600"
      stroke-dasharray="440"
      stroke-dashoffset="440"
    />
  </svg>

</div>
<style>
  #progress{
    animation: circleProgress 2s forwards;
  }
  @keyframes circleProgress {
    100%{
      stroke-dashoffset:10%;
    }
  }
  </style>